<template>
	<view>
		<view class="item_box">

			<view class="item_box_content"
				v-for="item in menu" :key="item" @click="itemClick(item.foodId)">
				<image style="border-radius: 20upx;width: 340upx;height: 360upx;" :src="item.picture" mode="aspectFill">
				</image>
				<view style="" class="item-name">{{item.name}}</view>
			</view>


		</view>

	</view>
</template>

<script>
	import uniIcons from "@/components/uni/uni-icons/uni-icons.vue";
	import {
		myRequestPost
	} from '@/utils/request.js'
	export default {
		props: ['menu'],
		components: {
			uniIcons
		},
		data() {
			return {};
		},
		methods: {
			itemClick(foodId) {
				uni.navigateTo({
					url: '/pages/fooddetail/fooddetail?foodId=' + foodId
				})
			}
		}
	}
</script>

<style lang="scss">
	.item_box{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-left: 16rpx;
		margin-right: 16rpx;
		gap: 20rpx;
		flex-wrap: wrap;
		.item_box_content{
			display: flex;
			flex-direction:column;
			align-items: center;
			margin-top: 12upx;
			margin-left: 8rpx;
			margin-bottom: 8rpx;
		}
	}
	.item-wrapper {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.item-name {
		margin-top: 10upx;
		font-size: 32upx;
		font-weight: bold;
		width: 260upx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>